<template>
  <div class="h100p flex-col">
    <u-navbar :is-back="false" title-bold class="flex-none">
      <div class="flex-row w100vw flex-auto">
        <div class="ml font-bold font-lg w100p">
          欢迎登陆 - {{ $appName }}
        </div>
      </div>
    </u-navbar>

    <!--    四种状态，已登录，未登录，已绑定手机号，未绑定手机号-->

    <!--    目前是未登录状态-->
    <!--    已登录的情况，第三方应用申请获取您的-->
    <!---->
    <!--    已登录，显示出来用户的个人信息-->
    <div class="flex-1 pt-30vh">
      <div v-if="user" class="h35vh col-between-center">
        集美小世界丨女生日常分享交友圈 申请
        <div class="mt">{{ user.nickName }}</div>
        <div class="mt">
          <u-avatar :src="user.avatarUrl" mode="square"></u-avatar>
        </div>
        是否授权手机号

        需要测试下不登陆能否直接获取手机号
        <button class="cu-btn radius sm bg-orange"
                open-type="getPhoneNumber"
                @getphonenumber="getPhoneNumberByWx">绑定
        </button>
      </div>

      <!--      可以页面右上角放返回按钮， 没有这么干的，自己提供个返回按钮-->

      <div v-else class="h35vh col-between-center">

        <div class="w340px u-type-warning-light-bg row-col-center mx px-sm py">
          <!--          <u-icon name="volume-fill" class="u-type-warning" size="72"></u-icon>-->
          <div class="ml-smm font-bold font-md flex-1 col-row-center u-type-primary">
            <!--            <div>未登录，无法授权</div>-->
            <!--            <div>请点击登陆按钮进行授权</div>-->
            <div class="mb-sm">未登录，请点击登陆按钮，进行登陆操作</div>
            <div>登录后绑定手机号才能发布动态</div>
          </div>
        </div>

        <div class="row-center">
          <u-button class="mr-lg" @click="noAuthGoBack">
            <u-icon name="arrow-left" size="32" class="mr-xs"></u-icon>
            不授权并返回
          </u-button>
          <!--          <u-button class="text-bold" type="success"
                              open-type="getUserInfo" @getuserinfo="mpWxLogin"
                    >
                      <u-icon name="account-fill" size="36" class="mr-xs"></u-icon>
                      登陆并授权
                    </u-button>-->

          <u-button class="text-bold" type="success"
                    open-type="getUserInfo" @getuserinfo="mpWxLogin"
          >
            <u-icon name="account-fill" size="36" class="mr-xs"></u-icon>
            微信登陆
          </u-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator'
import {namespace} from 'vuex-class'
import ProviderMsg from "@/const/ProviderMsg";
import {systemModule, userModule} from "@/plugins/store";
import UniLogin from "@/uni/login/UniLogin";
import Toast from "@/utils/Toast";
import UniUserVO from "@/model/login/UniUserVO";
import JsonUtil from "@/utils/JsonUtil";
import UniUtil from "@/utils/UniUtil";

const userStore = namespace('user')

@Component
export default class LoginAll extends Vue {

  loginBtnDisable = false

  @userStore.State('user') user: UniUserVO

  //login的方法里判断，如果为第三方跳过来的，自动执行授权逻辑

  created() {
    //如果是第三方跳转过来的，要不要加个自动登录功能，如果用户已授权过，则自动执行一下登录逻辑。
    console.log(this.user.nickName)
  }

  get sadf() {
    return this.$appName
  }

  noAuthGoBack() {
  }

  getPhoneNumberByWx(e) {
    console.log(e)
    UniUtil.checkSession()
  }

  //这里肯定是未登录，那就是微信登陆

  async mpWxLogin(result) {
    // #ifdef MP
    //不为头条小程序
    // #ifndef MP-TOUTIAO
    if (result.detail.errMsg !== ProviderMsg.loginSuccess) {
      Toast.toast('您取消了登录')
      return
    }
    // #endif
    this.loginBtnDisable = true
    const user = await UniLogin.login(systemModule.provider).finally(() => {
      this.loginBtnDisable = false
    })
    console.log(user)
    userModule.setUser(user)
    // #endif
  }


  showTab = true

  showtab() {
    this.showTab = !this.showTab
    if (this.showTab) {
      uni.hideTabBar()
    } else {
      uni.showTabBar()
    }
  }
}
</script>
